import React, { useEffect, useState } from 'react';
import { connect } from 'umi';
import _ from 'lodash';
import { TjStation } from '@/pages/ETrade/components';
import { buildStationObjByData, isSelectStation, getHandleStationIds } from '../../helper';
import { Select } from 'antd';

const DealUnit = ({
  planData,
  type,
  activeKey,
  index,
  dispatch,
  stationObj,
  sitelist,
  disabled = false,
  strategyData = {},
}) => {
  const [stations, setStations] = useState([]);

  const [options, setOptions] = useState([]);

  useEffect(() => {
    // if (strategyData.markDate) {
    //     const selectStation = stationObj[strategyData.markDate] || [];
    //     const arr = _.cloneDeep(sitelist);
    //     arr.forEach((i) => {
    //         i?.children?.forEach((v) => {
    //             if (selectStation.some((s) => s.value === v.value)) {
    //                 const username = selectStation.filter((f) => f.value === v.value)[0]['username'];
    //                 v.label = v.label + ' ' + `(${username})`;
    //             }
    //         });
    //     });
    //     setStations(arr);
    // }
    setStations(sitelist);
  }, [sitelist, stationObj, strategyData.markDate]);

  useEffect(() => {
    if (disabled) {
      setOptions(_.cloneDeep(sitelist));
    }
  }, [disabled]);

  const changeStation = (v) => {
    // const { addValue } = getHandleStationIds(v, strategyData.stationIds);
    // if (!isSelectStation(stationObj[strategyData.markDate], addValue)) {
    // }
    const data = _.cloneDeep(planData);
    data[+activeKey].strategyList[index].stationIds = v;
    const stationObj = buildStationObjByData(data);
    dispatch({
      type: 'interprovincialSpotDeclaration/setState',
      payload: {
        planData: data,
        stationObj,
      },
    });
  };

  return disabled ? (
    <Select
      options={options}
      disabled={true}
      value={strategyData.stationIds || []}
      mode={'multiple'}
    />
  ) : (
    <TjStation
      disabled={type === 'intraday' ? false : !strategyData.markDate}
      options={stations}
      width={'100%'}
      value={strategyData.stationIds || []}
      onChange={changeStation}
    />
  );
};

export default connect(({ global, interprovincialSpotDeclaration }) => ({
  planData: interprovincialSpotDeclaration.planData,
  activeKey: interprovincialSpotDeclaration.activeKey,
  stationObj: interprovincialSpotDeclaration.stationObj,
  sitelist: interprovincialSpotDeclaration.sitelist,
  type: interprovincialSpotDeclaration.type,
}))(DealUnit);
